<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>订单管理</title>
  <meta charset="utf-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <link rel="stylesheet" href="/layui/css/layui.css" media="all">
</head>
<body>
<span class="layui-breadcrumb" style="margin: 15px">
  <a><cite>订单</cite></a>
</span>
<table class="layui-hide" id="order" lay-filter="order"></table>
<script src="/layui/layui.js" charset="utf-8"></script>
<script src="/jquery/jquery-3.5.1.min.js"></script>
<script type="text/html" id="bar">
  <a class="layui-btn layui-btn-xs" href="/order/item?id={{d.id}}">详情</a>
  {{# if (d.state === 'INIT'){ }}
  <a class="layui-btn layui-btn-xs" lay-event="replay">接单</a>
  {{# } }}
</script>

<script th:inline="none" type="text/javascript">
  $.ajaxSetup({
    dataType: "json",
    contentType: "application/json",
  });
  layui.use(['table', 'form'], function () {
    let table = layui.table;
    let form = layui.form;
    table.render({
      id: "orderTable",
      elem: '#order',
      url: "/api/order/page",
      method: 'post',
      title: '订单信息表',
      cols: [[
        {field: 'id', align: 'center', title: 'id', width: 50,},
        {field: 'amount', align: 'center', title: '订单金额', width: 100,},
        {field: 'number', align: 'center', title: '订单编号', width: 200,},
        {field: 'shopName', align: 'center', title: '店铺名称', width: 200,},
        {field: 'shopAddress', align: 'center', title: '店铺地址', width: 400,},
        {field: 'customerName', align: 'center', title: '客户姓名', width: 100},
        {field: 'customerAddress', align: 'center', title: '客户地址', width: 400,},
        {field: 'discountCouponAmount', align: 'center', title: '优惠金额', width: 100},
        {field: 'horsemanName', align: 'center', title: '配送人', width: 100},
        {field: 'state', align: 'center', templet: function (d) {
            switch (d.state) {
              case 'INIT': return '等待商家接单';
              case 'INIT2': return '等待骑手接单';
              case 'DELIVERY': return '配送中';
              case 'COMMENT': return '配送完成';
              case 'FINISH': return '订单结束';
              default: return '异常';
            }
          }, title: '订单状态', width: 150},
        {field: 'createName', align: 'center', title: '创建人', hide: 'true'},
        {field: 'createTime', align: 'center', title: '创建时间', hide: 'true'},
        {field: 'remake', align: 'center', title: '备注', hide: 'true'},
        {fixed: 'right', align: 'center', title: '操作', toolbar: '#bar', width: 130}
      ]],
      page: true,
      request: {
        pageName: 'pageNum', //页码的参数名称，默认：page
        limitName: 'pageSize' //每页数据量的参数名，默认：limit
      },
      response: {
        statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
      },
      parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
        return {
          "code": res.code, //解析接口状态
          "msg": res.message, //解析提示文本
          "count": res.data.total, //解析数据长度
          "data": res.data.records//解析数据列表
        };
      }
    });

    table.on('tool(order)', function (obj) {
      let data = obj.data;
      if (obj.event === 'replay') {
        layer.confirm('确认接单吗？', function () {
          const url = "/api/order/" + data.id + "/replay";
          $.ajax({
            url: url,
            type: "put",
            success: function (data) {
              if (data.code === 200) {
                layer.msg("处理成功");
                // 刷新表单
                table.reload('orderTable', true);
              } else {
                layer.msg(data.message);
              }
            }
          })
        });
      }
    });

  });
</script>
</body>
</html>